<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提高3</title>
    <style>
        input {
            border: 0; /*没有边框的意思*/
        }

        .user {
            border-width: 1px;
            border-color: pink;
            border-style: solid;
        }

        .nc {
            border-top-width: 1px;
            border-top-color: hotpink;
            border-top-style: solid;
            border-bottom-width: 1px;
            border-bottom-color: blue;
            border-bottom-style: solid;
        }

        .yhm {
            border-top: 1px solid red;
            border-bottom: 1px solid pink;
        }

        div {
            height: 1090px;
            width: 220px;
            border: 1px solid red;
            padding: 5px;
            margin: 5px;
        }

        .one {
            width: 200px;
            height: 200px;
            border-radius: 10px; /*一个数值表示4个角都是相同的弧度*/
            /*padding: 5px;*/
        }

        .two {
            width: 200px;
            height: 200px;
            border-radius: 10px;
        }

        .three {
            width: 200px;
            height: 200px;
            border-radius: 50%; /*取宽和高的一半就会变成一个圆 */
        }

        .four {
            width: 200px;
            height: 200px;
            border-radius: 10px 40px; /*对角线的关系*/
        }

        .five {
            width: 200px;
            height: 200px;
            border-radius: 10px 40px 80px; /*顺时针的方式来解析的*/
        }

        .padding {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            padding: 10px; /*padding如果只写一个值就表示上下左右都是这个边距*/
        }

        nav {
            height: 40px;
            background-color: #FCFCFC;
            border-top: 3px solid red; /*上边框*/
            border-bottom: 1px solid #a9a7f0; /*下边框*/
        }

        nav a {
            font-size: 14px;
            color: #4C4c4c;
            text-decoration: none; /*取消下划线*/
            padding: 0 15px;
            height: 40px;
            display: inline-block;
            line-height: 40px; /*文字垂直居中*/
        }

        nav a:hover {
            background-color: #eccb75;
        }

        .jvzhong {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            text-align: center; /*文字水平居中*/
            margin: 10px auto; /*盒子水平居中   左右改为auto*/
        }

        section {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

        section img {
            width: 250px; /*插入图片的大小更改*/
            height: 50px;
            padding: 20px; /*插入图片更改位置*/
            margin-top: 40px;
        }

        aside {
            width: 400px;
            height: 400px;
            border: 1px solid purple;
            background: #fff url(../images/1.jpg) /* 30px 50px*/ no-repeat;
            background-size: 200px 210px; /*背景图片更改大小*/
            background-position: 30px 50px;
        }
    </style>
</head>
<body>
昵　称:<input type="text" class="user"><br/><br/>
用户名:<input type="text" class="yhm"><br/><br/>
密　码:<input type="text" class="nc"><br/><br/>
<div class="yuanjiao">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
</div>
<div class="padding">内边距就是内容和边框的距离</div>
<nav>
    <a href="#">首页</a>
    <a href="">手机新浪网</a>
    <a href="">网站导航</a>
    <a href="">菜单栏</a>
</nav>
水平居中
<div class="jvzhong">ksjfksjbavjbdjk</div>
<section><!--插入图片-->
    插入图片
    <img src="../images/1.jpg" height="26" width="206"/>
</section>
<aside><!--背景图片--><br><br><br><br><br>
    背景图片

</aside>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>